<template>

  <div id="container">
    <div class="chart-container">
      <div ref="chart" class="chart" />
    </div>
  </div>

</template>

<script setup lang="ts">
import *as echarts from 'echarts'
import { cntByMonth } from '@/common/api';
import { onMounted, reactive, ref } from "vue";

let chartInstance = <any>null;
let chart = ref<any>(null);
let fontColorX = <string>'#6E7079';
let y: string[] = reactive<string[]>([])
let label: string[] = reactive<string[]>([])


let initCharts = function () {
  let data1 = y;
  let xAxisData = label;
  let barWidth = <number>20;
  let topData = ["1, 1, 1, 1, 1"];
  let bottomData = [1, 1, 1, 1, 1];
  let height = chart.value.clientHeight;
  let width = chart.value.clientWidth;
  const option = {
    backgroundColor: 'rgba(0,0,0,0)',
    tooltip: {
      trigger: 'axis',
      formatter: function (params: string) {
        let str = params[0].axisValue;
        return str;
      },
    },
    grid: {
      top: 40,
      bottom: 0,
      left: 40,
      right: 40,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      // 更改坐标轴颜色
      axisLine: {
        lineStyle: {
          color: fontColorX,
        },
        onZero: false,
      },
      // x轴的字体样式
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#00000000', // 更改坐标轴文字颜色
          fontSize: 14, // 更改坐标轴文字大小
          fontFamily: 'MicrosoftYaHei',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          fontSize: 12, // 更改坐标轴文字大小
          fontFamily: 'MicrosoftYaHei',
        },
      },
      // 更改坐标轴颜色
      axisLine: {
        lineStyle: {
          color: '#657CA8',
        },
      },
      // 网格线
      splitLine: {
        // 网格线
        lineStyle: {
          type: 'solid',
          width: 1,
        },
      },
    },
    series: [
      // 数据低下的圆片
      {
        name: '',
        type: 'pictorialBar',
        symbolOffset: ['0%', '50%'],
        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        z: 12,
        symbol: 'diamond',
        itemStyle: {
          opacity: 1,
          color: '#1B1B1C',
        },
        data: bottomData,
      },
      // 数据的柱状图
      {
        name: '',
        type: 'bar',
        barWidth: 20,
        itemStyle: {
          opacity: 1, // 这个是 透明度
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#0398CEFB' },
            { offset: 0.5, color: '#9299A25B' },
            { offset: 1, color: '#1B1B1C' },
          ]),
        },
        data: data1,
      },
      // 替代柱状图 默认不显示颜色，是最下方柱图value值 - 20
      {
        type: 'bar',
        symbol: 'diamond',
        barWidth: 22,
        itemStyle: {
          color: 'transparent',
        },
        data: data1,
      },
      // 数据顶部的样式
      {
        name: '',
        type: 'pictorialBar',
        symbol: 'diamond',
        symbolOffset: ['0%', '-50%'],
        symbolSize: [20, 10],
        z: 12,
        itemStyle: {
          normal: {
            opacity: 1,
            color: '#FFFFFF',
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              textStyle: {
                // 数值样式
                color: '#FFFFFF',
                fontSize: 12,
                top: 10,
              },
            },
          },
        },
        symbolPosition: 'end',
        data: data1,
      },
      // 阴影的顶部
      {
        name: '', // 头部
        type: 'pictorialBar',
        symbol: 'diamond',
        symbolOffset: ['0%', '-50%'],
        symbolSize: [20, 10],
        z: 12,
        symbolPosition: 'end',
        itemStyle: {
          color: 'rgba(18, 47, 133,0.5)',
          opacity: 0.3,
          borderWidth: 1,
          borderColor: 'rgba(18, 47, 133,1)',
        },
        data: topData,
      },
      // 后面的背景
      {
        type: 'bar',
        barWidth: 20,
        barGap: '-100%',
        z: 0,
        itemStyle: {
          color: 'rgba(18, 47, 133,0.3)',
        },
        data: topData,
      },
    ],
  };
  chartInstance.resize({
    width,
    height
  })
  chartInstance.setOption(option);
}


const resizeChart = () => {
  const chartInstance = echarts.init(chart.value);
  chartInstance.clear()
  window.addEventListener(
    "resize",
    () => {
      chartInstance.resize();
    }, false
  );
};


onMounted(() => {
  chartInstance = echarts.init(chart.value);
  cntByMonth().then(res => {
    res.data.sort(function (a, b) {
      return a.label > b.label ? 1 : -1;
    });
    res.data = res.data.slice(-5);
    let arr: string[] = []
    res.data.forEach((e) => {
      arr.push(e.num);
      label.push(e.label);
    });
    y = arr;
    if (y[0] != 'label') {
      initCharts();
    }
  })
});


defineExpose({ resizeChart });
</script>
<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .chart-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
  }
}

.chart {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>